<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            border: 1px solid pink;
            margin-left: 100px;
            margin-top: 100px;
            width: 300px;
            height: 120px;
            outline: none;
        }

        li {
            width: 350px;
            background-color: pink;
            margin-left: 60px;
            margin-top: 20px;
            font-size: 14px;
        }

        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
        <!-- <li></li> -->

    </ul>
    <script>
        // 需求 留言板 用户输入内容后 创建一个li元素 添加到ul里面
        var text = document.querySelector('textarea')
        var btn = document.querySelector('button')
        var ul = document.querySelector('ul')
        btn.addEventListener('click', function () {
            var li = document.createElement('li')
            if (text.value == '') {
                btn.disabled = true
                return false//如果内容为空则退出函数 终止程序
            } else {
                li.innerHTML = text.value + '<a href ="javascript:;">删除</a>'
                ul.insertBefore(li, ul.children[0])
            }
        })
        var as = document.querySelectorAll('a')
        for (var i = 0; i < as.length; i++) {
            as[i].addEventListener('click', function () {
                ul.removeChild(this.parentNode)
            })
        }












































        // var text = document.querySelector('textarea')
        // var but = document.querySelector('button')
        // var ul = document.querySelector('ul')
        // but.onclick = function () {
        //     var li = document.createElement('li')
        //     // ul.appendChild(li)
        //     li.innerHTML = text.value + ["<a href = 'javascript:;'>删除</a>"]
        //     ul.insertBefore(li, ul.children[0])

        //     var as = document.querySelectorAll('a')
        //     for (var i = 0; i < as.length; i++) {
        //         as[i].onclick = function () {
        //             ul.removeChild(this.parentNode)
        //         }
        //     }
        //   1.删除全部绑定点击事件 因为你不知道用户（管理员）会删除那一条
        //   2.发布了事件才会产生删除事件 所以删除事件一定是写在发布里面 可以看做是一个整体 但又各司其职
        // }


        // 增加需求 点击删除按钮后再开始删除元素

























        // var text = document.querySelector('textarea')
        // var but = text.nextElementSibling
        // var ul = but.nextElementSibling
        // but.onclick = function () {
        //     var li = document.createElement('li')
        //     li.innerHTML = text.value + "<a href='JavaScript:;'>删除</a>"
        //     ul.insertBefore(li, ul.children[0])//用insertBefore方法时 括号里是有两个参数的 一个为创建的元素 另一个是添加到什么位置 一般是某个父元素下.children[]
        //     var as = document.querySelectorAll('a')
        //     for (var i = 0; i < as.length; i++) {
        //         // ul.children[0]
        //         as[i].onclick = function () {
        //             ul.removeChild(this.parentNode)//删除ul里某个元素 （删除当前函数调用者的父级li）
        //         }
        //     }
        // }



























        // 1.确定事件源
        // var text = document.querySelector('textarea')
        // var btn = document.querySelector('button')
        // var ul = document.querySelector('ul')
        // //    2.绑定事件  点击发布事件 3.处理程序 创建一个li元素添加到ul里
        // btn.onclick = function () {
        //     if (text.value == '') {
        //         alert('您输入的内容为空')
        //         return false//如果用户未输入内容就终止这个程序 也就是终止函数
        //     } else {
        //         var li = document.createElement('li')
        //         li.innerHTML = text.value
        //         // ul.appendChild(li)
        //         ul.insertBefore(li,ul.children[0])
        //     }

        // } 
    </script>
</body>

</html>